<template>
  <view class="container">
    <!-- 触发按钮 -->
    <button @click="showPopup = true">打开视频预览</button>

    <!-- uni-popup 弹窗 -->
    <uni-popup
      v-model:show="showPopup"
      type="center"
      :mask-style="{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }"
      :mask-click="true"
      @close="onClose"
    >
      <view class="popup-content">
        <!-- 视频播放器 -->
        <video
          :src="videoUrl"
          :autoplay="true"
          :muted="true"
          :show-fullscreen-btn="true"
          :enable-danmu="false"
          @error="handleVideoError"
          class="video-player-popup"
        ></video>
      </view>
    </uni-popup>
  </view>
</template>
<script setup>
import { ref } from 'vue'

// 弹窗状态
const showPopup = ref(false)

// 视频地址
const videoUrl = ref('https://yourdomain.com/video.mp4')

// 关闭弹窗
const onClose = () => {
  // 可选：停止视频播放
}

// 错误处理
const handleVideoError = (e) => {
  console.error('视频播放错误:', e.detail.errMsg)
}
</script>
<style>
.popup-content {
  width: 90%;
  max-width: 400px;
  padding: 20px;
  background-color: transparent;
}

.video-player-popup {
  width: 100%;
  height: 250px;
  border-radius: 10px;
  overflow: hidden;
}
</style>
